<template>
    <div class="ho-header cp-container">
        <div class="nav head-navs">
            <nuxt-link to="/community">
                首页
            </nuxt-link>
            <nuxt-link to="/community/expert">
                专家中心
            </nuxt-link>
            <nuxt-link to="/community/article">
                文章
            </nuxt-link>
            <nuxt-link to="/community/quan?topicId=49&t=u">
                建筑圈
            </nuxt-link>
            <nuxt-link to="/community/online">
                在线办公
            </nuxt-link>
            <nuxt-link to="/community/enterprise">
                智企服务
            </nuxt-link>
            <nuxt-link to="/community/wiki">
                维基文化
            </nuxt-link>
            <el-button
                v-if="vdShow('/community/expert')"
                :loading="disabled"
                :disabled="disabled"
                class="expert"
                @click="handleJump('/community/expert')"
            >
                成为专家
            </el-button>
            <el-button
                v-if="vdShow('/community/article')"
                :loading="disabled"
                :disabled="disabled"
                class="expert"
                @click="handleJump('/community/article')"
            >
                发布文章
            </el-button>
        </div>
        <to-login :isFlag="isLogin" @callBackDialog="callBackDialogFn"></to-login>
        <validat-user :isFlag="isFlag" :isType="hasType" @callBackClose="callBackClose"></validat-user>
    </div>
</template>
<script lang="ts">
import {
    Component,
    Vue,
    Watch
} from 'nuxt-property-decorator'
import {
    State
} from 'vuex-class'
import {ciipWebUrl} from '../../../config/server.url.conf'
// import ValidateLoginConfirm from '~/method/confirm'
import validatUser from './validatUser.vue'
import toLogin from './toLogin.vue'
@Component({
    name: 'communityHeader',
    components: {
        validatUser,
        toLogin
    }
})
export default class CommunityHeader extends Vue {
    disabled: boolean = true
    hasType: string = ''
    isFlag: boolean = false
    isLogin: boolean = false
    ciipWebUrl: string = ciipWebUrl
    @Watch('$store.state.userNum', {immediate: true, deep: true})
    init (nv: number) {
        if (nv > 0) {
            this.disabled = false
        }
    }
    @Watch('$route.path', {immediate: true})
    routerChange (val: any) {
        if (val === '/community/article') {
            this.hasType = 'art'
        } else if (val === '/community/expert') {
            this.hasType = 'exp'
        }
    }
    vdShow (str: string) {
        const path = this.$route.path
        return path.indexOf(str) === 0
    }
    handleJump (path: string) {
        // const confirm = new ValidateLoginConfirm({
        //     that: this,
        //     path,
        //     disableStr: 'disabled'
        // })
        // confirm.init()
        if (this.$store.state.haslogin) {
            const user: string = this.$store.state.userinfo.selectRoleType
            if (user === 'PERSON') {
                if (this.userinfo.realStatus !== 'REAL_STATUS_PASS') {
                    this.isFlag = true
                } else {
                    if (path === '/community/article') {
                        window.open(this.ciipWebUrl + '/community/article?t=second')
                    } else if (path === '/community/expert') {
                        window.open(this.ciipWebUrl + '/community/expert')
                    }
                }
            } else {
                if (path === '/community/article') {
                    this.$message.error('只有个人用户能发布文章')
                } else {
                    this.$message.error('只有个人用户能成为专家')
                }
            }
        } else {
            this.isLogin = true
        }
    }
    callBackDialogFn (bol: boolean) {
        this.isLogin = bol
    }
    callBackClose (bol: boolean) {
        this.isFlag = bol
    }
    @State userinfo: any
}
</script>
<style lang="scss" scoped>
.ho-header{
    .head-nav{
        height: 40px;
        position: absolute;
        z-index: 5;
        a{
            font-size: 14px;
            color: #fff;
            position: relative;
            display: inline-block;
            line-height: 40px;
            margin-right: 35px;
            &:before{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #6cc1ee;
                display: none;
            }
            &:hover{
                color: #fff;
                &:before{
                    display: block;
                }
            }
            &.nuxt-link-active{
                color: #fff;
                &:before{
                    display: block;
                }
            }
            &:first-child{
                &.nuxt-link-active{
                    color: black;
                    &:before{
                        display: none;
                    }
                    &:hover{
                        color: #fff;
                        &:before{
                            display: block;
                        }
                    }
                }
                &.nuxt-link-exact-active{
                    color: #fff;
                    &:before{
                        display: block;
                    }
                }
            }
        }
    }
    .head-navs{
        height: 40px;
        a{
            font-size: 14px;
            color: black;
            position: relative;
            display: inline-block;
            line-height: 40px;
            margin-right: 35px;
            &:before{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #6cc1ee;
                display: none;
            }
            &:hover{
                color: black;
                &:before{
                    display: block;
                }
            }
            &.nuxt-link-active{
                color: black;
                &:before{
                    display: block;
                }
            }
            &:first-child{
                &.nuxt-link-active{
                    color: black;
                    &:before{
                        display: none;
                    }
                    &:hover{
                        color: black;
                        &:before{
                            display: block;
                        }
                    }
                }
                &.nuxt-link-exact-active{
                    color: #6cc1ee;
                    &:before{
                        display: block;
                    }
                }
            }
        }
    }

    .nav{
        .expert{
            width: 120px;
            height: 30px;
            padding: 0;
            line-height: 30px;
            font-size: 14px;
            color: #11a9e8;
            border: 1px solid #11a9e8;
            text-align: center;
            border-radius: 4px;
            position: absolute;
            left: 50%;
            margin-left: 470px;
            cursor: pointer;
            margin-top: 5px;
            &:hover{
                color: #11a9e8;
                &:before{
                    display: none!important;
                }
            }
        }
    }
}
</style>
